<script setup lang="ts">
//购物车订单商品展示界面

const orderFrom = defineModel('modelValue');
const checkState = defineModel('checkState');

checkState.value = checkState.value === undefined ? false : checkState.value
const props = defineProps({
  dataCategoryList: {
    type: Array,
    default: null
  },
  checkFalse: {
    type: Number,
    default: -1
  },
})

const emits = defineEmits(["check", "updateInfo", "del"]);

onMounted(() => {
  initInfo();
})

watch(() => props.checkFalse, (newValue) => {
  checkState.value = false;
  cancelUpdateInfo()
})

watch(() => orderFrom.value, (newValue) => {
  initInfo()
})

/**
 * 订单部分
 */

const canEdit = ref(true);

function isCheck() {
  let checkObj = {
    state: checkState.value,
    obj: orderFrom.value
  }
  emits("check", checkObj)
}


let isBluePic = ref(false);
let multiplier = ref(0);
let level = ref(1);
let count = ref(1);

function updateInfo() {
  orderFrom.value.isBluePic = isBluePic.value;
  orderFrom.value.multiplier = multiplier.value;
  orderFrom.value.level = level.value;
  orderFrom.value.count = count.value;

  emits("updateInfo", orderFrom.value);
  canEdit.value = true;
}

function cancelUpdateInfo() {
  initInfo();
  changeInfo();
  canEdit.value = true;
}

function initInfo() {
  isBluePic.value = orderFrom.value.isBluePic;
  multiplier.value = orderFrom.value.multiplier;
  level.value = orderFrom.value.level;
  count.value = orderFrom.value.count;
}

function changeInfo() {

  orderFrom.value.money = constantStore().calc(isBluePic.value, multiplier.value, orderFrom.value.commodity.multiplierUp, level.value, orderFrom.value.commodity.levelUp, orderFrom.value.commodity.price, count.value);
  // orderFrom.value.money = constantStore().calc(orderFrom.value.isBluePic, orderFrom.value.multiplier,
  //     orderFrom.value.commodity.multiplierUp, orderFrom.value.level, orderFrom.value.commodity.levelUp, orderFrom.value.commodity.price, orderFrom.value.count);
}

function del() {
  checkState.value = false;
  emits("del", orderFrom.value);
}


</script>
<template>
  <div class="commodity-order-box">
    <div class="info-check-box">
      <el-checkbox v-model="checkState" @change="isCheck"/>
    </div>
    <div class="info-left-box">
      <el-avatar shape="square" :size="140" :src="orderFrom.commodity.image" :disabled="canEdit"/>
    </div>
    <div class="info-right-box">
      <div class="orderFrom-title">
        <el-tooltip class="box-item" :content="orderFrom.commodity.name" placement="top" effect="dark">
          {{ orderFrom.commodity.name }}
        </el-tooltip>
      </div>
      <div class="orderFrom-item">
        <div class="orderFrom-item-title">
          数量：
        </div>
        <div class="orderFrom-item-edit">
          <el-input-number v-model="count" controls-position="right" :min="1" :max="99999"
                           size="small" @change="changeInfo" :disabled="canEdit"/>
        </div>
      </div>
      <div class="orderFrom-item" v-if="orderFrom.commodity.levelUp && orderFrom.commodity.levelUp > 0">
        <div class="orderFrom-item-title">
          等级：
        </div>
        <div class="orderFrom-item-edit">
          <el-input-number v-model="level" controls-position="right" size="small"
                           :min="1" :max="orderFrom.commodity.levelTop" @change="changeInfo" :disabled="canEdit"/>
        </div>
      </div>
      <div class="orderFrom-item"
           v-if="orderFrom.commodity.commodityCategory.hasMultiplier && orderFrom.commodity.commodityCategory.hasMultiplier === '1' ">
        <div class="orderFrom-item-title">
          品质：
        </div>
        <div class="orderFrom-item-edit">
          <el-input-number v-model="multiplier" controls-position="right" size="small"
                           :min="1" :max="99999" @change="changeInfo" :disabled="canEdit"/>
        </div>
      </div>
      <div class="orderFrom-item"
           v-if="orderFrom.commodity.commodityCategory.hasPic && orderFrom.commodity.commodityCategory.hasPic === '1' ">
        <div class="orderFrom-item-title">
          蓝图：
        </div>
        <div class="orderFrom-item-edit">
          <el-checkbox v-model="isBluePic" @change="changeInfo" :disabled="canEdit"/>
        </div>
      </div>
      <div class="orderFrom-item">
        <div class="orderFrom-item-title">
          价格：
        </div>
        <div class="orderFrom-item-value">
          {{ orderFrom.money }}
        </div>
      </div>
    </div>
    <div class="info-btn-box">
      <div class="btn-item">
        <el-button type="danger" @click="del">删 除</el-button>
      </div>
      <div class="btn-item">
        <el-button type="primary" v-if="canEdit" @click="canEdit=false">编 辑</el-button>
        <div style="display: flex;flex-direction: column;align-items: center" v-else>
          <el-button @click="updateInfo">确 认</el-button>
          <el-button style="margin: .5rem 0" @click="cancelUpdateInfo">取 消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.commodity-order-box {
  display: flex;
  justify-content: space-between;
  padding: .5rem;
  margin: .5rem;
  min-width: 15rem;
  border-radius: 1rem;
  background-color: #f7f7f7;

  .info-check-box {
    display: flex;
    align-items: center;
  }

  .info-left-box {

  }

  .info-right-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .orderFrom-title {
      text-align: center; /* 水平居中 */
      font-size: 1.1rem;
      font-weight: bolder;
      max-width: 10rem;
      white-space: nowrap !important; /* 不换行 */
      overflow: hidden !important; /* 隐藏溢出内容 */
      text-overflow: ellipsis !important; /* 使用省略号表示溢出 */
    }

    .orderFrom-item {
      display: flex;
      align-items: center;
      //justify-content: space-between;
      justify-content: start;

      .orderFrom-item-edit {
        max-width: 10rem;
      }
    }

  }

  .info-btn-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .btn-item {
      padding: .5rem .3rem;
    }
  }
}
</style>